<template>
  <div
      class="right-panel"
      @dragover.prevent
      @drop="onDrop"
  >
    <svg :width="width" :height="height">
      <component
          v-for="(item, index) in svgElements"
          :key="index"
          :is="item.type"
          v-bind="item.attrs"
      />
    </svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      width: 800,
      height: 600,
      svgElements: [],
    };
  },
  methods: {
    onDrop(event) {
      const data = JSON.parse(event.dataTransfer.getData('text/plain'));
      const rect = event.currentTarget.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;

      const newElement = {
        type: data.type,
        attrs: this.getAttributes(data.type, x, y),
      };

      this.svgElements.push(newElement);
    },
    getAttributes(type, x, y) {
      switch (type) {
        case 'circle':
          return { cx: x, cy: y, r: 30, fill: 'blue' };
        case 'rect':
          return { x: x - 30, y: y - 30, width: 60, height: 60, fill: 'green' };
        case 'line':
          return { x1: x - 30, y1: y, x2: x + 30, y2: y, stroke: 'red', 'stroke-width': 2 };
        default:
          return {};
      }
    },
  },
};
</script>

<style scoped>
.right-panel {
  flex: 1;
  height: 100vh;
  padding: 10px;
}

svg {
  border: 1px solid #ccc;
}
</style>
